<template>
  <div id="PhotoServer" :class="{ smallFontSize: showEdition, mediumFontSize: !showEdition }">
    <div style="padding: 0 2px">
      <form action="/">
        <van-search style="
             width: calc(100% - 4px);
             background: #EEE;
             border-radius: 10px;
             height:40px;
             font-size: 14px;
             float: left" v-model="value1" placeholder="请输入图集名称" @search="onSearch" />
      </form>
    </div>
    <div>
      <van-list v-model="loading" :finished="finished" :offset="4" finished-text="没有更多了" @load="onLoad">
        <div class="van-clearfix">
          <div style="position: relative;" :class="showMoble ? 'boxser' : 'pcStyle'" v-for="(item, index) in imagesList"
            :key="index">
            <p @click="handleToThreePage(item)">
              <img width="186" height="116" v-if="item.vrUrl == null && item.suolueFileId" :src="baseurlid + item.suolueFileId"
                alt v-lazy="baseurlid + item.suolueFileId" />
              <img width="186" height="116" v-if="item.vrUrl != null && item.suolueFileId" :src="baseurlid + item.suolueFileId"
                alt v-lazy="baseurlid + item.suolueFileId" />
              <img v-if="!item.suolueFileId"
                src="https://nfzjszlb.jst.zj.gov.cn/tyzcpt/api/upload/oss/preview?fileId=3e7acb97b640411a9ce06017e7c12964"
                alt="">
            </p>
            <div :class="{ smallFontSize: showEdition, mediumFontSize: !showEdition }"
              style="padding:0px;position: absolute;bottom: 0;width:100%;">
              <p>{{ item.floors ? item.floors : 0 }}层|{{ item.buildArea ? item.buildArea : 0 }}m²</p>
              <p style=" white-space:nowrap; text-overflow:ellipsis;overflow:hidden;">{{ item.atlasName }}</p>
              <!-- <p style="font-weight:800">{{item.atlasName}}</p> -->
              <p style="margin-left:4px;">
                <span style="font-weight:640">{{ item.countyName }}</span>
                <span v-if="item.atlasType != null" style="font-weight:640;float:right" @click="vrSee(item)">VR图集</span>
                <span v-else style="font-weight:640;float:right">通用图集</span>
              </p>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>
<script>
import { Atlases, selectListByIds, dataTransFilePreview } from '../../utils/api'
export default {
  data() {
    return {
      showEdition: false,
      value: '',
      loading: false,
      finished: false,
      showPicker: false,
      value1: '',
      showMoble: true, //初始化移动端相关内容的显示
      baseurl: window.g.BaseURL4,
      baseurls: window.g.OSSPriview,
      baseurlid: window.g.OSSPriviewId,
      baseurl1: window.g.BaseURL2,
      index: 0,
      columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
      imagesList: []
    }
  },
  created() {
    this.judgmentResolution()
  },
  methods: {
    /* 分辨率区分--PC端+移动端 */
    judgmentResolution() {
      var sUserAgent = navigator.userAgent.toLowerCase()
      var bIsIpad = sUserAgent.match(/ipad/i) == 'ipad'
      var bIsIphoneOs = sUserAgent.match(/iphone os/i) == 'iphone os'
      var bIsMidp = sUserAgent.match(/midp/i) == 'midp'
      var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == 'rv:1.2.3.4'
      var bIsUc = sUserAgent.match(/ucweb/i) == 'ucweb'
      var bIsAndroid = sUserAgent.match(/android/i) == 'android'
      var bIsCE = sUserAgent.match(/windows ce/i) == 'windows ce'
      var bIsWM = sUserAgent.match(/windows mobile/i) == 'windows mobile'
      if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
        this.showMoble = true
      } else {
        this.showMoble = false
      }
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      this.index += 1
      if (this.value1) {
        this.getData(this.value1, window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '')
      } else {
        this.getData('', window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '')
      }
    },
    onSearch() {
      this.index = 0
      this.imagesList = []
      this.getData(this.value1, window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '')
    },
    onConfirm(value) {
      this.value = value
      this.showPicker = false
    },
    handleToThreePage(data) {
      this.$router.push({
        path: '/PhotoThreePage',
        query: {
          data: JSON.stringify(data),
          id: this.$route.query.id
        }
      })
    },
    //vr图集预览
    vrSee(item) {
      if (item.vrUrl) {
        let url = window.g.VrUrl + item.vrUrl
        if (ZWJSBridge) {
          ZWJSBridge.openLink({
            url: url
          })
            .then(res => {
            })
            .catch(err => {
            })
        }
      } else {
        this.$toast.fail('暂未配置！')
        // this.$notify({ type: 'info', message: '暂未配置！' });
      }
    },
    //获取附件文件流
    getFileUrl: async function (element, item) {
      let formData = new FormData();
      formData.append("accessCode", "98bcf528966e48ce896a8b3fd02d45d5");
      formData.append(
        "cityCode",
        window.localStorage.getItem("citycode")
          ? window.localStorage.getItem("citycode")
          : "330282000000"
      );
      formData.append(
        "paramStr",
        JSON.stringify({
          fileGuid: element.fileid,
        })
      );
      let response = await dataTransFilePreview(formData);
      if (response) {
        var img = new Blob([new Int8Array(response.data, 0)], {
          type: response.headers["content-type"],
        }); //type类型可自定义
        element["isImage"] = true;
        element["url"] = window.URL.createObjectURL(img);
      }
    },
    getData: async function (data, data1) {
      let params = {
        accessCode: '29ff26f660fc47f79c15bff382eeca6d',
        atlasName: data,
        bookNumber: '',
        atlasStyle: "通用图集",
        cityCode: window.localStorage.getItem('citycodeChange') ? window.localStorage.getItem('citycodeChange') : '330282000000',
        pageNo: this.index,
        pageSize: 10,
        atlasStyle: "通用图集"
      }
      if (this.$route.query.id) {
        if (window.localStorage.getItem('routerID') && window.localStorage.getItem('routerID') != undefined) {
          params.cityCode = window.localStorage.getItem('routerID')
        } else {
          params.cityCode = this.$route.query.data.S
          window.localStorage.setItem('routerID', this.$route.query.data.S)
        }
      }
      if(params.cityCode == 'undefined'){
        params.cityCode = JSON.parse(window.sessionStorage.getItem('fileData'))?.S
      }
      const res = await Atlases(params)
      if (res.data.code == 200) {
        let data2 = res.data.data.pageList
        // data2.forEach(item=>{
        //   this.getFileUrl(item)
        // })
        this.loading = false
        this.imagesList = this.imagesList.concat(data2) //追加数据
        if (res.data.data.pageList.length == 0) {
          //数据全部加载完成
          this.finished = true
        } else {
          this.finished = false
        }
      } else {
        this.finished = true
        this.$toast.fail('暂无图集')
      }
      //   this.imagesList = res.data.data.pageList
    }
  },
  mounted() {
    this.imagesList = []
    this.showEdition = this.$store.state.Edition
  }
}
</script>
<style lang="scss">
#PhotoServer {
  //   height: 100vh;
  //   height: 100%;
  background: #fff;
  font-size: 18px;

  .filterWrap {
    clear: both;
    // overflow: hidden;
  }

  .boxser {
    width: 45%;
    height: 200px;
    // border: 1px solid #aaa;
    box-shadow: 10px 10px 20px 10px #eee;
    float: left;
    margin: 1.5% 1.5% 1.5% 3%;
    border-radius: 10px;
  }

  .pcStyle {
    width: 24%;
    height: 330px;
    margin-left: 1%;
    float: left;

    img {
      width: 360px;
      height: 256px;
      text-align: center;
    }
  }
}
</style>
<style >
.van-cell {
  padding: 4px 14px !important;
}
</style>
